import React, { useState } from 'react'
import { NavBar, Button, Toast } from '@nutui/nutui-react'
import { ArrowLeft } from '@nutui/icons-react'
import '@nutui/nutui-react/dist/style.css'
import "../../../css/settings.css"
import { List, Switch } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

export default function Settings() {
    let navigate = useNavigate()
    let [big, setBig] = useState("9.9")
    let layout =() => {
        localStorage.removeItem('user')
        sessionStorage.removeItem("piao")
        sessionStorage.removeItem("accesstoken")
        sessionStorage.removeItem("refreshtoken")
        navigate("/reallogin")
    }
    return (
        <div>
            <NavBar
                back={
                    <>
                        <ArrowLeft />
                    </>
                }
                onBackClick={() => navigate("/app/my")}
            >
                设置
            </NavBar>
            <div style={{ backgroundColor: "skyblue" }}>
                <List>
                    <List.Item onClick={() => navigate("/information")}>
                        账号资料
                        <img src='./logo512.png' style={{ width: "20px", height: "20px", marginLeft: "70%" }} alt=''></img>
                    </List.Item>
                    <List.Item onClick={() => navigate("/address")}>
                        地址管理
                    </List.Item>
                    <List.Item onClick={() => navigate("/safe")}>
                        账号与安全
                    </List.Item>
                </List>

                <List style={{ marginTop: "50px" }}>
                    <List.Item onClick={() => navigate("/messages") }>消息通知设置</List.Item>
                    <List.Item onClick={() => {
                        Toast.show({
                            content: '清除缓存成功',
                            icon: 'success',
                        })
                        setBig("0")
                    }}>清除缓存
                        <span style={{ marginLeft: "260px", color: "gray" }}>{big}M</span>
                    </List.Item>
                </List>
                <List style={{ marginTop: "50px" }}>
                    <List.Item onClick={() => {
                        Toast.show({
                            content: '敬请期待...',
                        })
                    }}>关于我们</List.Item>
                </List>
                <Button type="default" shape='square' onClick={layout} style={{ width: "100%", height: "50px", marginTop: "50px", backgroundColor: "white", border: "0.1px solid #000" }}>
                    退出登录
                </Button>
            </div>

        </div>
    )
}
